<template>
  <div class="chart" v-resize="resizeCharts" ref="barChart"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'chartLine',
  inject: ['reload'],
  props: {
    legend: { // 分类名称，即上面的可选择实体
      type: Array,
      default () {
        return []
      }
    },
    xAxis: { // 横坐标
      type: Array,
      default () {
        return []
      }
    },
    series: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      charts: null
    }
  },
  computed: {},
  methods: {
    resizeCharts () {
      this.charts.resize()
    },
    initCharts () {
      this.$nextTick(() => {
        this.charts = echarts.init(this.$refs.barChart)
        this.charts.clear()
        this.charts.showLoading()
        if (this.legend.length > 0 || this.series.length > 0 || this.xAxis.length > 0) {
          this.setOption()
        }
      })
    },
    setOption () {
      const option = this.getOption()
      this.charts.hideLoading()
      this.charts.setOption(option, true)
    },
    getOption () {
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.legend,
          icon: 'roundRect',
          x: 'center',
          y: '0%'
        },
        // color: ['#99CCFF', '#003300', '#0099CC', '#666666', '#3366CC', '#006699',
        //   '#336699', '#666699', '#333333', '#336666', '#999999',
        //   '#669933', '#CCCC99', '#006633', '#663300', '#CC9933', '#FFCC99'],
        color: ['#FFC8B4', '#FFDDAA', '#FFEE99', '#FFFFBB', '#EEFFBB', '#CCFF99', '#99FF99', '#BBFFEE',
          '#AAFFEE', '#99FFFF', '#CCEEFF', '#CCDDFF', '#CCCCFF', '#CCBBFF', '#D1BBFF', '#E8CCFF',
          '#F0BBFF', '#FFB3FF', '#FFFF77', '#DDFF77', '#BBFF66', '#77FFCC', '#77FFEE', '#66FFFF',
          '#77DDFF', '#99BBFF', '#9999FF', '#9F88FF', '#B088FF', '#D28EFF', '#E38EFF', '#FF77FF',
          '#33FFAA', '#33FFDD', '#33FFFF', '#33CCFF', '#00FF99', '#00FFCC', '#00FFFF', '#00BBFF',
          '#00DDAA', '#00DDDD', '#009FCC'],
        grid: {
          left: '3%',
          right: '4%',
          top: '20%',
          bottom: '6%',
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: this.series
      }
      return option
    }
  },
  mounted () {
    this.initCharts()
  },
  beforeDestroy () {
    this.charts && this.charts.dispose()
    this.charts = null
  },
  watch: {
    legend: {
      handler () {
        this.setOption()
      }
    },
    xAxis: {
      handler () {
        this.setOption()
      }
    },
    series: {
      handler () {
        this.setOption()
      }
    }
  },
  components: {}
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
